<template>
	<view class="content">
		<!-- 位置 -->
		<view class="Location" @tap="locationChoose()">
			<image src="../../static/1.png" mode=""></image>
			<view class="loca" v-if="isChange">{{loca}}</view>
			<image src="../../static/more.png"></image>
		</view>
		<view class="tp">
			{{CityWeather.time}}
			{{CityWeather.temp}}
		</view>
		<view class="cd">
			<image :src="CityWeather.imgurl" mode=""></image>
			{{CityWeather.text}}
		</view>
		<!--生活指数常量-->
		<view class="lall">
			<table>
				<tr>
					<td class="a3">生活常量</td>
					<td class="a3">指数</td>
					<td class="a3">级别</td>
					<td class="a3">建议</td>
				</tr>
				<tr>
					<td>{{Citydaily.name}}<image src="../../static/make.png"></image></td>
					<td class="a1">{{Citydaily.level}}</td>
					<td class="a4">{{Citydaily.category}}</td>
					<td class="a2">{{Citydaily.text}}</td>
				</tr>
				<tr>
					<td>{{Citydaily.name1}}<image src="../../static/sport.png"></td>
					<td class="a1">{{Citydaily.level1}}</td>
					<td class="a4">{{Citydaily.category1}}</td>
					<td class="a2">{{Citydaily.text1}}</td>
				</tr>
				<tr>
					<td>{{Citydaily.name2}}<image src="../../static/cloth.png"></td>
					<td class="a1">{{Citydaily.level2}}</td>
					<td class="a4">{{Citydaily.category2}}</td>
					<td class="a2">{{Citydaily.text2}}</td>
				</tr>
				<tr>
					<td>{{Citydaily.name3}}<image src="../../static/sun.png"></td>
					<td class="a1">{{Citydaily.level3}}</td>
					<td class="a4">{{Citydaily.category3}}</td>
					<td class="a2">{{Citydaily.text3}}</td>
				</tr>
			</table>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				loca:'深 圳',
				isChange:true,
				CityWeather:{},
				Citydaily:{}
			}
		},
		onLoad() {
			this.GetCityID('深圳')
		},
		onShow() {
			let that=this
			uni.$on('SearchCity',function(data){
				console.log(data)
				//that.loca=data.cityName
				that.isChange=true
				console.log(that.isChange)
				that.GetCityID(data.cityName)
				
			})
			//获取城市locationID 
			uni.request({
				url:'https://geoapi.qweather.com/v2/city/lookup?key=de0ea86bdbbb4f62a226fd69369d3d43&location=深圳',
			method:'GET',
			header:{
				'Content-Type':"application/json"
			},
			success: (res) => {
				console.log('获取城市locationID为：')
				console.log(res.data.location[0].id)
			}
			}),
			//天气信息
			uni.request({
				url:'https://devapi.qweather.com/v7/weather/now?location=101280601&key=de0ea86bdbbb4f62a226fd69369d3d43',
			method:'GET',
			header:{
				'Content-Type':"application/json"
			},
			success: (res) => {
				console.log('获取城市的天气信息')
				console.log(res)
			},
			}),
			//生活指数常量
			uni.request({
				url:'https://devapi.qweather.com/v7/indices/1d?&key=de0ea86bdbbb4f62a226fd69369d3d43&location=101280601&type=1,3,13,16',
				method:'GET',
				header:{
					'Content-Type':"application/json"
				},
				success: (res) => {
					console.log('获取城市生活指数常量')
					console.log(res)
				},
			})
		},
		methods: {
			GetCityID:function(cityName){
				let URL='https://geoapi.qweather.com/v2/city/lookup?location='+cityName+'&key=de0ea86bdbbb4f62a226fd69369d3d43';
				uni.request({
					url:URL,
					method:'GET',
					header:{
						'content-type':'application/json'
					},
					success: (res) => {
						console.log('获取的城市ID信息为：')
						console.log(res)
						let city=res.data.location[0].adm1+','+res.data.location[0].adm2+','+res.data.location[0].name
						this.loca=city
						this.GetCityWeather(res.data.location[0].id)
						this.GetCitydaily(res.data.location[0].id)
					}
				})
			},
			GetCityWeather:function(locationID){
				let URL='https://devapi.qweather.com/v7/weather/now?location='+locationID+'&key=de0ea86bdbbb4f62a226fd69369d3d43'
				uni.request({
					url:URL,
					method:'GET',
					header:{
						'content-type':'application/json'
					},
					success: (res) => {
						console.log('获取城市天气信息为：')
						console.log(res)
						let tempCityW={}
						//tempCityW.time=res.data.now.obsTime
						let Wtime=res.data.now.obsTime.split('T')
						console.log(Wtime)
						let date=Wtime[0].split('-')
						let time=Wtime[1].split('+')
						tempCityW.time=date[0]+'年'+date[1]+'月'+date[2]+'日'+time[0]
						tempCityW.temp='温度：'+res.data.now.temp+'°'
						tempCityW.imgurl='/static/WeatherIcon-master/weather-icon-S2/64/'+res.data.now.icon+'.png'
						tempCityW.text=res.data.now.text
						this.CityWeather=tempCityW
						
					}
				})
			},
			GetCitydaily:function(locationID){
			let URL='https://devapi.qweather.com/v7/indices/1d?&location='+locationID+'&key=de0ea86bdbbb4f62a226fd69369d3d43&type=1,3,13,16'
			uni.request({
			 		url:URL,
					method:'GET',
					success: (res) => {
						console.log('获取城市生活常量指数：')
			 			console.log(res)
			 			let daily={}
						daily.name=res.data.daily[0].name
						daily.name1=res.data.daily[1].name
						daily.name2=res.data.daily[2].name
						daily.name3=res.data.daily[3].name
						daily.level=res.data.daily[0].level
						daily.level1=res.data.daily[1].level
						daily.level2=res.data.daily[2].level
						daily.level3=res.data.daily[3].level
						daily.category=res.data.daily[0].category
						daily.category1=res.data.daily[1].category
						daily.category2=res.data.daily[2].category
						daily.category3=res.data.daily[3].category
						daily.text=res.data.daily[0].text
						daily.text1=res.data.daily[1].text
						daily.text2=res.data.daily[2].text
						daily.text3=res.data.daily[3].text
						this.Citydaily=daily
					}
			 	})
			 },
			locationChoose:function(){
				console.log('search');
				uni.navigateTo({
					url:"../loactionChoose/locationChoose"
				})
			}
		}
	}
</script>

<style>
	.content {
		background-image: url(../../static/bg/2.jpg);
		height: 100%;
		width: 100%;
		position: absolute;
		background-size: 100%;
	}

	.Location{
		position: absolute;
		border: 1upx solid #7995BF;
		display: flex;
		flex-direction: row;
		width:100%;
		height: 500upx;
		margin-top: 20upx;
		background-color: #376fa7;
		opacity: 0.8;
		border-radius: 30upx;
	}
	.loca{
		background-color: #f5f5f5;
		border: 5upx solid #5985ff;
		border-radius: 30upx;
		color: #3765c7;
		text-align: center;
		width: 500upx;
		height: 58upx;
		display: block;
		margin-top: 68upx;
		margin-left: 28upx;
		font-size: 40upx;
	}
	.tp{
		line-height: 90upx;
		width: 400upx;
		height: 180upx;
		text-align: center;
		position: absolute;
		font-size:40upx ;
		color:#ffffff ;
		margin-top: 180upx;
		margin-left: 24%;
	}
	.cd{
		text-align: center;
		color:#ffffff ;
		font-size: 40upx;
		position: absolute;
		width: 400upx;
		height: 120upx;
		margin-top: 360upx;
		margin-left: 24%;
	}
	.cd image{
		margin-top: 50upx;
		position: absolute;
		width: 100upx;
		height: 100upx;
	}
	.lall{
		margin-top: 580upx;
	}
	table{
		position: absolute;
		text-align: center;
		background-color:rgba(0, 0, 0, 0);
		width: 100%;
		height: 500upx;
	}
	td{
		width: 50upx;
		font-size: 32upx;
		font-family: SimHei;
		color: #FFFFFF;
	}
	.a1{
		font-size: 50upx;
		text-align: center;
		position: absolute;
		margin-top: 40upx;
		margin-left: 40upx;
		display: block;
		width: 70upx;
		height: 70upx;
		background-color: #cc7667;
		border-radius: 50upx;
	}
	.a2{
		border-radius:20upx ;
		background-color: #00aa7f;
		font-size: 28upx;
		color: #ffffff;
	}
	.a3{
		font-size: 40upx;
		color: #ffff7f;
	}
	.a4{
		font-size: 40upx;
		width: 50upx;
		height: 30upx;
	}
	.lall image{
		background-color: white;
		margin-top: 15upx;
		width: 55upx;
		height: 55upx;
	}
    .Location image{
		margin-left: 25upx;
		margin-top: 68upx;
		width: 80upx;
		height: 80upx;
		display: block;
	}
	
</style>
